<template>
  <div>
    <el-row :gutter="15">
      <el-form
        style="margin-top: 20px"
        :model="form"
        ref="ruleForm"
        label-width="150px"
        :rules="rules"
      >
        <!-- 第三方平台相关 -->
        <!-- <el-col :span="13">
          <el-form-item label="是否开启">
            <el-switch
              v-model="form.iEnable"
              active-text="开启"
              :active-value="activeValue"
              :inactive-value="inActiveValue"
            />
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="云地址" prop="sAddress">
            <el-input
              v-model="form.sAddress"
              placeholder="请输入云地址"
              clearable
              :disabled="form.iEnable == 0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="云端口" prop="iPort">
            <el-input
              v-model="form.iPort"
              type="number"
              placeholder="请输入云端口"
              clearable
              :disabled="form.iEnable == 0"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="云端用户名" prop="sUserdata">
            <el-input
              v-model="form.sUserdata"
              placeholder="请输入云端用户名"
              clearable
              :disabled="form.iEnable == 0"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="云端密码" prop="sPassword">
            <el-input
              v-model="form.sPassword"
              placeholder="请输入云端密码"
              type="password"
              autocomplete="off"
              clearable
              :disabled="form.iEnable == 0"
              show-password
            ></el-input>
          </el-form-item>
        </el-col> -->

        <!-- 云端配置相关 -->
        <el-col :span="13">
          <el-form-item label="是否开启">
            <el-switch
              v-model="form.enable"
              active-text="开启"
              :active-value="activeValue"
              :inactive-value="inActiveValue"
            />
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="设备序列号" prop="sn">
            <el-input
              v-model="form.sn"
              placeholder="请输入设备序列号"
              clearable
              :disabled="form.enable == 0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="minioUrl" prop="minioUrl">
            <el-input
              v-model="form.minioUrl"
              placeholder="请输入minioUrl"
              clearable
              :disabled="form.enable == 0"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="minioId" prop="minioId">
            <el-input
              v-model="form.minioId"
              placeholder="请输入minioId"
              clearable
              :disabled="form.enable == 0"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="minioSecret" prop="minioSecret">
            <el-input
              v-model="form.minioSecret"
              placeholder="请输入minioSecret"
              type="password"
              autocomplete="off"
              clearable
              :disabled="form.enable == 0"
              show-password
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item size="large">
            <el-button type="primary" @click="onSubmit('ruleForm')">保存</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
// import {getThirdpartyApi, editThirdpartyApi} from "@/api/network";
import { getCloudConfigApi, editCloudConfigApi } from "@/api/network";

export default {
  name: "MvCloudgateTerminalThirdPlatform",

  data() {
    // var validateIP = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('云端口不能为空'));
    //   } else {
    //     if (!(value >= 1 && value <= 65535)) {
    //       callback(new Error('ip端口i须在1-65535之间'));
    //     }
    //     callback();
    //   }
    // };
    return {
      activeValue: 1,
      inActiveValue: 0,
      form: {
        // 第三方平台相关
        // iEnable: null,
        // sAddress: null,
        // sUserdata: "",
        // sPassword: "",
        // iPort: "",
        // 云端配置相关
        enable: 0,
        sn: '',
        minioId: '',
        minioUrl: '',
        minioSecret: '',
      },
      rules: {
        sAddress: [
          {required: true, message: "云地址不能为空", trigger: "blur"},
        ],
        iPort: [
          // { validator: validateIP, trigger: 'blur' },
          {required: true, message: "云端口不能为空", trigger: "blur"},

        ],
        sUserdata: [
          {required: true, message: "云端用户名不能为空", trigger: "blur"},
        ],
        sPassword: [
          {required: true, message: "云端密码不能为空", trigger: "blur"},
        ],
      },

    };
  },
  created() {
    // this.getThirdparty();
    this.getCloudConfig();
  },
  mounted() {
  },

  methods: {
    // 第三方平台相关
    // getThirdparty() {
    //   getThirdpartyApi().then((res) => {
    //     // console.log(res);
    //     this.form = {...res};
    //   });
    // },
    // onSubmit(formName) {
    //   // console.log(this.$refs[formName].validate)
    //   this.$refs[formName].validate((valid) => {
    //     console.log(valid, 'valid')
    //     if (valid) {
    //       editThirdpartyApi(this.form).then((res) => {
    //         // console.log(res);
    //         this.$message.success("保存成功");
    //       });
    //     }
    //   });
    // },

    // 云端配置相关
    getCloudConfig() {
      getCloudConfigApi().then((res) => {
        // console.log(res);
        this.form = {...res};
      });
    },
    onSubmit(formName) {
      // console.log(this.$refs[formName].validate)
      this.$refs[formName].validate((valid) => {
        console.log(valid, 'valid')
        if (valid) {
          editCloudConfigApi(this.form).then((res) => {
            // console.log(res);
            this.$message.success("保存成功");
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
